import React, { useEffect, useState } from 'react';
import { connect } from 'umi';
import { Form, Button, Card } from 'antd';
import Detail from './components/detail'
import PayDetail from './components/payDetail';
import DrawerCondition from '@/components/DrawerCondition';
import CommissionDetail from './components/commissionDetail';
const CardMask = (props) => {
  const { dispatch, visible = {}, onClose, handleCallback, loading } = props;
  const { show = false, detail = {} } = visible;
  const { orderInfo = {}, detailOrderPayRecordList = [], detailCommissionItemSnapshotList = [] } = detail
  const [active, setActive] = useState('detail');
  useEffect(() => {
    if (!show) {
      setActive('detail')
    }
  }, [show])
  const tabList = [

    {
      key: 'detail',
      tab: '详情',
    },
    {
      key: 'payDetail',
      tab: '支付信息',
    },

  ];
  const onTabChange = (key) => {
    setActive(key);
  };
  const contentList = {
    payDetail: <PayDetail list={detailOrderPayRecordList}></PayDetail>,
    detail: <Detail detail={orderInfo}></Detail>,
    commissionDetail: <CommissionDetail show={show} handleCallback={handleCallback} onClose={onClose} orderInfo={orderInfo} list={detailCommissionItemSnapshotList}></CommissionDetail>
  };
  const modalProps = {
    title: `分配 `,
    visible: show,
    width: 1200,
    onClose,
  };

  return (
    <DrawerCondition {...modalProps}>
      <Card
        style={{
          width: '100%',
        }}
        tabList={tabList}
        activeTabKey={active}
        onTabChange={(key) => {
          onTabChange(key);
        }}
      >
        {contentList[active]}
      </Card>
    </DrawerCondition>
  );
};

export default connect(({ loading }) => ({
  loading: loading.effects['commission/fakeConfirmDistribute'],
}))(CardMask);
